<template>
  <section class="works-section">
    <div class="section-container">
      <h2 class="section-title">优秀作品展示</h2>
      <div class="works-grid">
        <el-card 
          v-for="work in works" 
          :key="work.id" 
          class="work-card" 
          :body-style="{ padding: 0 }"
        >
          <div class="work-image-wrapper">
            <img :src="work.imageUrl" :alt="work.title" class="work-image" />
            <div class="work-overlay">
              <h3 class="work-title">{{ work.title }}</h3>
              <p class="work-author">{{ work.author }}</p>
              <el-button type="primary" @click="handleViewDetail(work)">
                查看详情
              </el-button>
            </div>
          </div>
          <div class="work-info">
            <div class="work-stats">
              <span>
                <el-icon><View /></el-icon> 
                {{ work.views }}
              </span>
              <span>
                <el-icon><Star /></el-icon> 
                {{ work.likes }}
              </span>
            </div>
            <div class="work-tags">
              <el-tag 
                v-for="tag in work.tags" 
                :key="tag" 
                size="small"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>
      <div class="view-more">
        <el-button type="primary" plain @click="handleViewMore">
          查看更多作品
        </el-button>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
import { View, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'ExcellentWorksSection',

  components: {
    View,
    Star
  },

  props: {
    works: {
      type: Array,
      required: true
    }
  },

  setup() {
    const router = useRouter()

    const handleViewDetail = (work) => {
      router.push(work.link)
    }

    const handleViewMore = () => {
      router.push('/works')
    }

    return {
      handleViewDetail,
      handleViewMore
    }
  }
})
</script>

<style lang="scss" scoped>
.works-section {
  padding: $spacing-extra-large 0;
  background-color: #f7f8fa;
}

.section-container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

.section-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  text-align: center;
  margin-bottom: $spacing-extra-large;
  font-weight: bold;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: $spacing-extra-small;
  margin-bottom: $spacing-extra-large;
}

.work-card {
  transition: $transition-base;
  overflow: hidden;

  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow-base;

    .work-overlay {
      opacity: 1;
    }
  }
}

.work-image-wrapper {
  position: relative;
  height: 240px;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  color: white;
  padding: $spacing-base;
}

.work-title {
  font-size: $font-size-large;
  margin-bottom: $spacing-small;
}

.work-author {
  font-size: $font-size-base;
  margin-bottom: $spacing-base;
  opacity: 0.8;
}

.work-info {
  padding: $spacing-base;
}

.work-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: $spacing-small;
  color: $text-secondary;

  span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-mini;
}

.view-more {
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}
</style>
  